<template>
  <div class="my-self">
      <my-tabbar :selected="tab" @change="handle">
          <mt-tabbar v-model="selected">
            <mt-tab-item id="home">
              <i class="fa-shopping-cart fa"></i>
              全部商品
            </mt-tab-item>
            <mt-tab-item id="myinfo">
              <i class="fa-home fa icon-tabbar"></i>
              我的信息
            </mt-tab-item>
            <mt-tab-item id="performance">
              <i class="fa-bar-chart fa icon-tabbar"></i>
              绩效
            </mt-tab-item>
          </mt-tabbar>
        </my-tabbar>
    <div class="my-thumbnail">
      <div class="my-bg">
        <span class="my-weichat-name">微信号：阆中牛肉</span>
      </div>
      <div class="my-info">
        <div class="my-info-item"></div>
        <div class="my-info-item" @click="myPerformance">我的业绩</div>
        <span class="segmentation">|</span>
        <div class="my-info-item" @click="myPerformance">我的团队</div>
      </div>
      <div class="my-header">
      </div>
    </div>
    <div class="items-container">
      <div class="my-item" @click="goShoppingTro">
       <span class="fa fa-shopping-cart icon-item"></span> 我的购物车 <span class="right-icon fa fa-angle-double-right"></span>
      </div>
      <div class="my-item" @click="goOrderList">
       <span class="fa fa-list-ul icon-item" style="font-size: 1rem"></span> 我的订单 <span class="right-icon fa fa-angle-double-right"></span>
      </div>
      <div class="my-item" @click="goAddress">
        <span class="fa fa-map-marker icon-item"></span> 我的地址 <span class="right-icon fa fa-angle-double-right"></span>
      </div>
    </div>
    <div class="my-code">
      <span class="code-title">我的二维码</span>
      <img class="my-code-img-wrapper" src="../assets/images/empty-order.png" alt="">
    </div>
    
  </div>
</template>

<script>
  import { baseUrl } from '../config/index.js'
  export default {
    name: 'MySelf',
    data () {
      return {
        selected: 'myinfo'
      }
    },
    watch: {
      selected: function (newValue) {
        if (newValue === 'home') {
          window.location.href = 'products.html'
        } else if (newValue === 'performance') {
          window.location.href = 'performance.html'
        } else if (newValue === 'myinfo') {
          window.location.href = 'my_info.html'
        }
      }
    },
    methods: {
      goShoppingTro () {
        window.location.href = 'shopping_trolley.html'
      },
      goOrderList (){
        window.location.href = 'order_list.html'
      },
      goAddress (){
        window.location.href = 'select_address.html'
      },
      myPerformance (){
        window.location.href = 'my_performance.html'
      }
    }
  }
</script>

<style lang="scss" scoped>
 @import "../assets/css/variable";
 @import "../assets/css/px2rem";

  .my-self{
    position: fixed;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    left:0;
    right:0;
    top:0;
    background: #eaeaea;
  }

  .my-thumbnail{
    float: left;
    width:100%;
    position: relative;
    height: px2rem(600px);
    .my-bg{
      float: left;
      width: 100%;
      height: px2rem(400px);
      background: linear-gradient(#ffa63b, $theme-color-deep);
      position: relative;
      .my-weichat-name{
        position: absolute;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 0.8rem;
        color: white;
        bottom: px2rem(20px);
        left:px2rem(400px);
      }
    }
    .my-info{
      width:100%;
      height: px2rem(200px);
      box-sizing: border-box;
      background: white;
      border-top: 1px solid $borderColor;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      .my-info-item{
        flex: 1;
        font-size: 0.7rem;
        color: $fontColor;
      }
    }

    .my-header{
      width:px2rem(250px);
      height:px2rem(250px);
      border-radius: 50%;
      position: absolute;
      box-sizing: border-box;
      border: 1px solid $borderColor;
      box-shadow:  0 0 5px rgba(0,0,0,0.3);
      bottom: px2rem(100px);
      left:px2rem(100px);
      background-size: cover;
      background-image: url("../assets/images/defalut-header.jpg");
    }
    .segmentation{
      color: #e5e5e5;
      font-size: 0.85rem;
    }
  }

 .items-container{
   margin-top: px2rem(70px);
   float: left;
   width:100%;
   clear: both;
   background: white;
   .my-item{
     height: px2rem(150px);
     line-height: px2rem(150px);
     font-size: 0.8rem;
     box-sizing: border-box;
     padding-left: px2rem(180px);
     position: relative;
     width:100%;
     float: left;
     border-top: 1px solid $borderColor;
     background: white;
     display: block;
     color: $fontColor;
   }

   .icon-item{
     position: absolute;
     left:0;
     top:0;
     color: $theme-color;
     width:px2rem(150px);
     font-size: 1.2rem;
     line-height: px2rem(150px);
     text-align: center;
     height: px2rem(150px);
   }

   .right-icon{
     float: right;
     width:px2rem(150px);
     height: px2rem(150px);
     line-height:px2rem(150px);
     text-align: center;
     font-size: 1.2rem;
     color:#d5d5d5;
   }
 }

  .my-code{
    width:100%;
    float: left;
    height: auto;
    margin-top: px2rem(70px);
    border-top: 1px solid $borderColor;
    background: white;
  }

  .code-title{
    font-size: 0.8rem;
    color: $fontColor;
    text-indent: 1em;
    display: block;
    width: 100%;
    line-height: px2rem(200px);
  }

  .my-code-img-wrapper{
    margin: 10%;
    width: 80%;
    box-shadow: 0 0 px2rem(20px) rgba(0,0,0, 0.3);
  }

  .my-self .mint-tabbar {
    width: 100%;
    position: static !important;
    bottom: 0;
    left: 0;

  }

  .my-self .mint-tab-item {
    height: 1.8rem !important;
  }


</style>
